@import '../../style/common.less';

.icons-body {
  display: flex;
  .home-body-border();

  overflow: hidden;
  transition: opacity 300ms;

  .icons-form {
    width: 100px;
    display: flex;
    padding: 32px;
    flex-direction: column;
    border-right: 1px solid var(--home-color-border);
    background: var(--home-color-bg-1);

    :global(.arco-space) {
      display: flex;
    }

    .form-bottom {
      margin-top: auto;
    }
  }

  .icons-display {
    position: relative;
    width: 1014px;
    height: 500px;
    display: flex;
    align-items: flex-start;
    .home-lattice-background();

    .icons-list {
      display: flex;
      flex-wrap: wrap;

      .icons-item {
        margin: 14px;
        padding: 12px;
        font-size: 48px;
        color: var(--color-text-1);
        border-radius: 8px;
        cursor: pointer;

        &:hover {
          background-color: var(--color-bg-1);
          box-shadow: 0 10px 11px rgba(78, 89, 105, 6%), 0 6px 4px rgba(78, 89, 105, 3%),
            0 0 0 1px rgba(78, 89, 105, 6%), 0 2.89797px 2.12518px rgba(78, 89, 105, 3.43%),
            0 1.87823px 1.37737px rgba(78, 89, 105, 3%),
            0 1.18233px 0.867039px rgba(78, 89, 105, 2.57%),
            0 0.67932px 0.498168px rgba(78, 89, 105, 2.09%),
            0 0.298986px 0.219257px rgba(78, 89, 105, 1.44%);
        }

        :global(.arco-icon) {
          display: block;
        }
      }
    }

    .icons-panel {
      position: absolute;
      bottom: 14px;
      right: 14px;
      padding: 25px 32px;
      box-shadow: var(--home-box-shadow);
      border-radius: 6px;
      background-color: var(--color-bg-1);

      &-link {
        color: rgb(var(--primary-6));
      }
    }
  }
}
